<template>
  <div class="myself">
    <el-container
      style="
        height: 600px;
        width: 1300px;
        border: 1px solid rgb(121, 121, 121);
        margin-top: 30px;
      "
    >
      <el-aside width="220px" style="background-color: rgb(78, 88, 101)">
        <div class="menuHeader">
          <div style="height: 65px; width: 100%">
            <el-tooltip placement="top">
              <div slot="content"><span>点我修改头像</span></div>
              <el-upload
                action=""
                :http-request="upLoadFile"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload"
                style="
                  float: left;
                  margin-left: 30px;
                  border-radius: 50%;
                  height: 60px;
                  width: 60px;
                "
              >
                <img v-if="imageUrl" :src="imageUrl" class="userName-Avater" />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-tooltip>
            <h2>{{ userName }}</h2>
          </div>
          <div class="menuHeader-foot" style="float: left; margin-left: 30px">
            {{ userDept }}
          </div>
          <div class="menuHeader-foot" style="float: right; margin-right: 30px">
            {{ userType }}
          </div>
        </div>
        <!-- 设置选中的导航 -->
        <el-menu
          router
          :default-openeds="['3']"
          :default-active="this.$route.path.slice(1)"
          text-color="white"
          background-color="rgb(78, 88, 101)"
          active-text-color="rgb(0, 178, 122)"
        >
          <el-menu-item index="MyselfHome">
            <template slot="title"
              ><i class="el-icon-s-home"></i>我的首页</template
            >
          </el-menu-item>
          <el-menu-item index="MyselfMessage">
            <template slot="title"
              ><i class="el-icon-chat-dot-round"></i>我的消息</template
            >
          </el-menu-item>
          <el-submenu index="3">
            <template slot="title"
              ><i class="el-icon-document"></i>我的文档</template
            >
            <el-menu-item
              index=""
              style="text-align: center"
              @click="showThirdConfirmDialog"
              >上传</el-menu-item
            >
            <el-menu-item index="MyselfDownload" style="text-align: center"
              >下载</el-menu-item
            >
            <el-menu-item index="MyselfFavorite" style="text-align: center"
              >收藏</el-menu-item
            >
          </el-submenu>
          <el-menu-item index="MyselfData">
            <template slot="title"
              ><i class="el-icon-user-solid"></i>个人信息</template
            >
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-container>
        <!-- <el-header style="text-align: right; font-size: 12px"> -->
        <!-- <el-dropdown>
        <i class="el-icon-setting" style="margin-right: 15px"></i>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>查看</el-dropdown-item>
          <el-dropdown-item>新增</el-dropdown-item>
          <el-dropdown-item>删除</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <span>王小虎</span> -->
        <!-- </el-header> -->

        <el-main style="padding: 0">
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
import { uploadavatar, getCheckPassword } from "@/api/myself/myself";
export default {
  data() {
    return {
      userName: this.$store.getters.userName,
      userDept: this.$store.getters.userDept,
      userType: this.$store.getters.userTypeName,
      password: "123",
      userId: this.$store.getters.userId,
      imageUrl: this.$store.getters.avatar,
      formData: [],
    };
  },
  methods: {
    // 验证密码弹出框
    async showThirdConfirmDialog() {
      await this.$prompt(
        '<p style="font-size:20px;margin-top:30px"><b>请输入密码验证您的身份信息</b></p>',
        "",
        {
          dangerouslyUseHTMLString: true,
          customClass: "passwordMessageBox",
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          cancelButtonClass: "third-btn-custom-cancel",
          confirmButtonClass: "third-btn-custom-confirm",
          inputPlaceholder: "密码",
          center: true,
          showClose: false,
          inputValidator: (value) => {
            if (!value) {
              return "输入不能为空";
            }
          },
          inputErrorMessage: "输入不能为空",
          beforeClose: (action, instance, done) => {
            if (action === "confirm") {
              let value = instance.inputValue;
              // if (value === this.password) {
              //   // 输入密码成功后跳转到上传界面而且    **还未完成功能：1、导航栏的选中显示应该改一下。
              //   // 2、在本页面输入过一次密码以后不需要再次输入了
              //   this.$router.push("/MyselfUpload");
              //   this.$message({
              //     type: "success",
              //     message: "身份校验成功 ",
              //   });
              // } else {
              //   this.$message({
              //     type: "error",
              //     message: "密码错误",
              //   });
              // }
              // 传递密码给后端进行验证判断
              let data = { userId: this.userId, inputPassword: value };
              console.log(data);
              getCheckPassword(data)
                .then((res) => {
                  console.log(res);
                  // 判断返回值
                  if (res.data === true) {
                    this.$router.push("/MyselfUpload");
                    this.$message({
                      type: "success",
                      message: "身份校验成功 ",
                    });
                  } else {
                    this.$message({
                      type: "error",
                      message: "密码错误",
                    });
                  }
                })
                .catch((err) => {
                  console.log(err);
                });
            }
            done();
          },
        }
      )
        .then(() => {})
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消输入",
          });
        });
    },
    // 上传头像重写
    upLoadFile(val) {
      var formData = new FormData();
      console.log(val.file);
      formData.append("multipartFile", val.file);
      formData.append("userId", this.userId);
      //  axios.post('../../static/data.json', formData)
      // .then((res) => {
      //   console.log( res);
      // })
      console.log(formData);
      uploadavatar(formData)
        .then((res) => {
          console.log(res);
          val.onSuccess(res);
        })
        .catch((err) => {
          val.onError(err);
        });
    },

    // 上传头像后的的事件
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
      this.$store.commit("setAvatar", this.imageUrl); // 公共存储的头像地址进行修改
      localStorage.setItem("avatar", JSON.stringify(this.imageUrl)); //修改后的头像本地存储
    },
    //  上传头像前的检验
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
  },
};
</script>

<style scoped>
* {
  margin: 0 auto;
}

.menuHeader {
  background-color: rgb(0, 178, 129);
  width: 100%;
  height: 100px;
  margin: 5px auto;
  padding-top: 15px;
}

.userName-Avater {
  /* margin-left: 30px; */
  border-radius: 50%;
  height: 60px;
  width: 60px;
}

h2 {
  display: block;
  float: right;
  color: white;
  width: 100px;
  margin-top: 15px;
  margin-right: 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: x-large;
  font-weight: bolder;
}

.menuHeader-foot {
  font-size: smaller;
  margin-top: 10px;
  color: white;
}

.el-menu {
  font-weight: bolder;
  font-size: large;
  border-right: 0 !important;
}
</style>
<style>
.passwordMessageBox {
  width: 700px;
  height: 400px;
}

.el-message-box__input {
  width: 350px;
  margin: auto;
  margin-top: 30px;
}

.third-btn-custom-cancel {
  float: right;
  margin-right: 200px;
  margin-top: 60px;
  width: 100px;
  height: 30px;
  line-height: 5px;
  background-color: orange;
  color: white;
}

.third-btn-custom-confirm {
  float: right;
  margin-right: 60px;
  margin-top: 60px;
  width: 100px;
  height: 30px;
  line-height: 5px;
}
</style>
